<css href="/Public/design/iconfont/iconfont.css" />
<style>
    .site-doc-icon li {
        display: inline-block;
        vertical-align: middle;
        width: 50px;
        height: 50px;
        line-height: 50px;
        margin-right: -1px;
        margin-bottom: -1px;
        border: 1px solid #e2e2e2;
        font-size: 14px;
        text-align: center;
        color: #666;
        transition: all .3s;
        -webkit-transition: all .3s;
        cursor: pointer;
    }
    
    .site-doc-icon li:hover {
        background: #e8e8e8;
    }
    
    .site-doc-icon li .layui-icon {
        font-size: 24px;
    }
    
    .site-doc-icon .name,
    .site-doc-icon .code-name {
        display: none;
    }
</style>

<ul class="icon_lists dib-box site-doc-icon">
    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan2"></span>
        <div class="name">
            单行文本
        </div>
        <div class="code-name">icon-a-ziyuan2</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan4"></span>
        <div class="name">
            按钮
        </div>
        <div class="code-name">icon-a-ziyuan4</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan8"></span>
        <div class="name">
            标签页
        </div>
        <div class="code-name">icon-a-ziyuan8</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan12"></span>
        <div class="name">
            多选按钮组
        </div>
        <div class="code-name">icon-a-ziyuan12</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan13"></span>
        <div class="name">
            分割线
        </div>
        <div class="code-name">icon-a-ziyuan13</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan3"></span>
        <div class="name">
            资源 3
        </div>
        <div class="code-name">icon-a-ziyuan3</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan5"></span>
        <div class="name">
            按钮选择框
        </div>
        <div class="code-name">icon-a-ziyuan5</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan6"></span>
        <div class="name">
            编辑器
        </div>
        <div class="code-name">icon-a-ziyuan6</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan20"></span>
        <div class="name">
            流水号
        </div>
        <div class="code-name">icon-a-ziyuan20</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan21"></span>
        <div class="name">
            开关
        </div>
        <div class="code-name">icon-a-ziyuan21</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan9"></span>
        <div class="name">
            单选按钮组
        </div>
        <div class="code-name">icon-a-ziyuan9</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan18"></span>
        <div class="name">
            及联下拉框
        </div>
        <div class="code-name">icon-a-ziyuan18</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan10"></span>
        <div class="name">
            地址
        </div>
        <div class="code-name">icon-a-ziyuan10</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan17"></span>
        <div class="name">
            视频
        </div>
        <div class="code-name">icon-a-ziyuan17</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan14"></span>
        <div class="name">
            关键词
        </div>
        <div class="code-name">icon-a-ziyuan14</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan7"></span>
        <div class="name">
            标签
        </div>
        <div class="code-name">icon-a-ziyuan7</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan25"></span>
        <div class="name">
            子表单
        </div>
        <div class="code-name">icon-a-ziyuan25</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan16"></span>
        <div class="name">
            手机号
        </div>
        <div class="code-name">icon-a-ziyuan16</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan24"></span>
        <div class="name">
            坐标
        </div>
        <div class="code-name">icon-a-ziyuan24</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan22"></span>
        <div class="name">
            日期时间
        </div>
        <div class="code-name">icon-a-ziyuan22</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan29"></span>
        <div class="name">
            文件
        </div>
        <div class="code-name">icon-a-ziyuan29</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan11"></span>
        <div class="name">
            多行文本
        </div>
        <div class="code-name">icon-a-ziyuan11</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan30"></span>
        <div class="name">
            下拉框
        </div>
        <div class="code-name">icon-a-ziyuan30</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan33"></span>
        <div class="name">
            用户
        </div>
        <div class="code-name">icon-a-ziyuan33</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan26"></span>
        <div class="name">
            数字
        </div>
        <div class="code-name">icon-a-ziyuan26</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan35"></span>
        <div class="name">
            行容器
        </div>
        <div class="code-name">icon-a-ziyuan35</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan19"></span>
        <div class="name">
            资源 19
        </div>
        <div class="code-name">icon-a-ziyuan19</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan34"></span>
        <div class="name">
            小数
        </div>
        <div class="code-name">icon-a-ziyuan34</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan23"></span>
        <div class="name">
            URL
        </div>
        <div class="code-name">icon-a-ziyuan23</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan32"></span>
        <div class="name">
            邮箱
        </div>
        <div class="code-name">icon-a-ziyuan32</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan31"></span>
        <div class="name">
            周期
        </div>
        <div class="code-name">icon-a-ziyuan31</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan28"></span>
        <div class="name">
            图片
        </div>
        <div class="code-name">icon-a-ziyuan28</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan15"></span>
        <div class="name">
            滑块
        </div>
        <div class="code-name">icon-a-ziyuan15</div>
    </li>

    <li class="dib">
        <span class="icon iconfont icon-a-ziyuan27"></span>
        <div class="name">
            所属部门
        </div>
        <div class="code-name">icon-a-ziyuan27</div>
    </li>

</ul>

<script>
    layui.use('jquery', function() {
        var $ = layui.jquery;

        //设置监听
        $('.site-doc-icon li').click(function() {
            parent.callback($(this).find('.code-name').html());
            parent.think_close();
        });
    });
</script>